<template>
	<loading v-if="0 != loading" :status="loading" />
	<view v-else class="main-view">
		<view class="tab-view">
			<view class="tab-title">
				<view class="title-item" v-for="(item, index) in tabList" :key="index" 
					:data-item="item" @tap="changeTab">
					<text :class="tabIndex == item.idx ? 'active-text' : ''">{{item.text}}</text><view class="tab-mark" v-if="tabIndex == item.idx"></view>
				</view>
			</view>
		</view>
		<!-- 电子卡券 -->
		<view class="goods-list-view" v-if="tabValue == 'rights'">
			<view class="goodslist" v-if="rightsList && rightsList.length > 0">
				<view class="item" @tap.stop.prevent="goECouponDetail" :data-id="item.id" v-for="(item, index) in rightsList"
					:key="item.id">
					<view class="couponImage">
						<view class="ECoupon-logoView">
							<image :src="util.attachedUrl(item.previewImg, baseUrl)" class="ECoupon-img"></image>
						</view>
					</view>
					<view class="couponName">{{ item.rightsName }}</view>
					<view class="couponPrice">
						<text class="pointTocoupons">{{ item.points }}积分{{item.price && item.price >= 0.01 ? ` + ¥${item.price}` : ''}}</text>
					</view>
				</view>
			</view>
			<view class="building-wrap" v-if="util.isEmpty(rightsList)">
				<image class="building-img" src="/static/image/home_ic_empty@2x.png"></image>
				<view class="building-tip">电子卡券上架中,敬请期待...</view>
			</view>
			<view v-if="!ECouponsHaveMore && !util.isEmpty(rightsList)" class="haveMore">
				<view class="haveMore-line"></view>
				<view class="txt">没有更多了</view>
				<view class="haveMore-line"></view>
			</view>
		</view>
		<!-- 商品 -->
		<view class="goods-list-view" v-if="tabValue == 'goods'">
			<view class="goodslist" v-if="exchangeGoodsList && exchangeGoodsList.length > 0">
				<view class="item" @tap.stop.prevent="goPointGoodsDetail" :data-id="item.id"
					v-for="(item, index) in exchangeGoodsList" :key="item.id">
					<view class="goodsImage">
						<image :src="baseUrl + '/' + item.goodsImages" class="goodsImage"></image>
					</view>
					<view class="goodsName">{{ item.goodsName }}</view>
					<view class="goodsPrice">
						<text class="pointToGoods">{{ item.needPoints }}积分</text>
						<text class="xiahuaPrice" v-if="!util.isEmpty(item.goodsSkuPrice)">¥{{ item.goodsSkuPrice }}</text>
					</view>
				</view>
			</view>
			<view v-if="!pointGoodHaveMore && !util.isEmpty(exchangeGoodsList)" class="haveMore">
				<view class="haveMore-line"></view>
				<view class="txt">没有更多了</view>
				<view class="haveMore-line"></view>
			</view>
			<view class="building-wrap" v-if="util.isEmpty(exchangeGoodsList)">
				<image class="building-img" src="/static/image/home_ic_empty@2x.png"></image>
				<view class="building-tip">商品上架中,敬请期待...</view>
			</view>
		</view>
		
	</view>
</template>
<script module="util" lang="wxs" src="../../utils/util.wxs"></script>
<script>
	import loading from '@/components/loading/loading';
	import {
		baseImgUrl,
		baseUrl,
		staticBaseUrl
	} from '../../utils/constant.js';
	import {
		http
	} from '@/utils/commonRequest.js'; // 局部引入
	const util = require('../../utils/util.js');


	export default {
		components: {
			loading,
		},
		data() {
			return {		
				baseImgUrl: baseImgUrl,
				baseUrl: baseUrl,
				loading: 1, // 1加载中,0加载成功,-1加载失败
				page: {
					goods: 1,
					rights: 1
				},
				listData: {},
				tabList: [
					{ text: '卡券兑换榜', value: 'rights', idx: 0 },
					{ text: '好物热兑榜', value: 'goods', idx: 1 },	
				],
				haveMore: true, //是否还有更多数据加载
				tabIndex: 0,
				tabValue: 'rights',
				exchangeGoodsList: [],
				rightsList: [],
				pointGoodHaveMore: true,
				ECouponsHaveMore: true
			}
		},
		onLoad(options) {
			const isTotalPlat = options && options.isTotalPlat
			this.$checkLogin().then(res => {
				this.fetchGoods();
				if(isTotalPlat == '1'){
					this.fetchRights();
				}else{
					this.tabValue = 'goods';
					this.tabIndex = 1;
					this.tabList = [
						{ text: '好物热兑榜', value: 'goods', idx: 1 }
					]
				}
			})
		},
		onReachBottom: function() {
			if(this.tabValue == 'goods' && this.pointGoodHaveMore){
				this.page.goods++;
				this.fetchGoods();
			}
			if(this.tabValue == 'rights' && this.ECouponsHaveMore){
				this.page.rights++;
				this.fetchRights();
			}
		},
		methods: {
			fetchGoods: function() {
				let that = this;	
				let params = {   												  
					page: this.page[this.tabValue],
					limit: '10'
				}
				http.get('/mtBank/queryByGoodsList', {params: params})
				.then((res) => {
					res = res.data
					if ('200' == res.code) {
						console.log('--商品 解锁更多',res)
						that.loading = 0;
						let list = res.page.list;
						that.exchangeGoodsList = [...that.exchangeGoodsList, ...list];
						that.pointGoodHaveMore = res.page.hasNextPage;
					}
				})
				.catch((err) => {
					this.loading = -1;
					console.log('err===',err);
				});
			},

			fetchRights: function() {
				let that = this;	
				let params = {   												  
					page: this.page[this.tabValue],
					limit: '10'
				}
				http.get('/mtBank/queryByRightsList', {params: params})
				.then((res) => {
					res = res.data
					if ('200' == res.code) {
						console.log('--商品 解锁更多',res)
						that.loading = 0;
						let list = res.page.list;
						that.rightsList = [...that.rightsList, ...list];
						that.ECouponsHaveMore = res.page.hasNextPage;
					}
				})
				.catch((err) => {
					this.loading = -1;
					console.log('err===',err);
				});
			},

			//切换tab
			changeTab: function(e){
				let item = e.currentTarget.dataset.item;
				if(item.value == this.tabValue) return
				this.tabIndex = item.idx;
				this.tabValue = item.value;
				if(this.tabValue == 'goods'){
					//this.exchangeGoodsList = [];
					//this.fetchGoods()
				}
				if(this.tabValue == 'rights'){
					//this.rightsList = [];
					//this.fetchRights()
				}
			},

      goPointGoodsDetail: function(e) {
        let id = e.currentTarget.dataset.id;
        uni.navigateTo({
          url: '/subPackages/pointMallPkg/pages/pointToGoodsDetail/pointToGoodsDetail?exchangeId=' + id
        });
      },

      goECouponDetail: function(e) {
        let id = e.currentTarget.dataset.id;
        uni.navigateTo({
          url: '/subPackages/right/pages/profitsDetail/profitsDetail?id=' + id
        });
      },
		}
	}
</script>

<style>
	.main-view{
		padding: 0 24rpx 24rpx;
	}
	
	.tab-view{
		width: 100%;
		height: 110rpx;
		background: #FFFFFF;
		box-shadow: 0px 14rpx 34rpx 6rpx rgba(182,178,199,0.2);
		margin: 0 -24rpx 40rpx -24rpx;
		position: fixed;
    top: 0;
    z-index: 999;
	}

	.tab-title{
		height: 100%;
		display: flex;
		align-items: center;	
		justify-content: space-around;	
	}
	
	.title-item{
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		position: relative;
		margin-right: 48rpx;
	}

	.active-text{
		font-size: 36rpx;
		color: #000;
		position: relative;
    z-index: 1;
	}

	.tab-mark{
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		height: 16rpx;
		background: linear-gradient(313deg, rgba(255,90,132,0) 0%, #ED1C24 100%);
	}

	.goods-list-view {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
		margin-top: 130rpx;
  }

  .goodslist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }

  .item {
    margin-bottom: 20rpx;
    width: 340rpx;
    display: flex;
    flex-direction: column;
    box-shadow: 0 14rpx 34rpx 6rpx rgba(182, 178, 199, 0.2);
    border-radius: 16rpx;
    padding-bottom: 30rpx;
  }

  .goodsImage {
    width: 340rpx;
    height: 340rpx;
    border-radius: 16rpx 16rpx 0 0;
  }

	.goodsName,
  .couponName {
    width: 100%;
    line-height: 42rpx;
    font-size: 30rpx;
    font-weight: 600;
    text-align: left;
    color: #333333;
    padding: 0 16rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

	.goodsName {
    margin-top: 16rpx;
  }

  .goodsPrice,
  .couponPrice {
    margin-top: 10rpx;
    padding: 0 16rpx;
  }

  .xiahuaPrice {
    text-decoration: line-through;
    margin-left: 20rpx;
    color: #999999;
  }

	.pointToGoods,
  .pointTocoupons {
    font-size: 28rpx;
    text-align: left;
    line-height: 40rpx;
    height: 40rpx;
    color: #ff3b30;
  }

	.haveMore {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    //margin: 8rpx 0 190rpx;
    text-align: center;
    //margin-top: 30rpx;
  }

  .haveMore-line {
    width: 54rpx;
    height: 2rpx;
    border: 1rpx solid rgba(0, 0, 0, 0.06);
  }

  .haveMore .txt {
    position: relative;
    padding: 0 16rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #cccccc;
    line-height: 34rpx;
  }

	.building-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    margin: 0 auto;
    padding-top: 100rpx;
  }

  .building-img {
    width: 570rpx;
    height: 310rpx;
  }

  .building-tip {
    font-family: PingFangSC-Regular;
    font-size: 28rpx;
    color: #1e2432;
    text-align: center;
    margin-top: 20rpx;
  }

	.couponImage {
    width: 340rpx;
    height: 340rpx;
    background: #fff5f1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 16rpx 16rpx 0 0;
  }

	.ECoupon-logoView {
    width: 340rpx;
    height: 340rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 16rpx 16rpx 0 0;
  }

  .ECoupon-img {
    width: 340rpx;
    height: 340rpx;
    border-radius: 16rpx 16rpx 0 0;
  }
</style>
